<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script language="javascript" src="graphics.js"></script>
</head>
    <body>
		<?php
			if(isset($_POST['submit'])){
				require_once("classes/database.class.php");
				require_once("includes/define.php");
				$bd = new Database(MYSQL_DB_HOST,MYSQL_DB_LOGIN,MYSQL_DB_PASSWORD,MYSQL_DB_NAME);
				$bd->connect();
				$bd->query("INSERT INTO colors VALUES ('".$_POST['colorName']."','".$_POST['redQuantity']."','".$_POST['greenQuantity']."','".$_POST['blueQuantity']."');");
				$bd->close();
			}
        ?>
        <div id="adminPage">
        	<h2>Ajouter une couleur</h2>
            <div id="newElement">
            	<div class="newColorBloc">
                    <div id="newShape">
                    </div>
                    <div class="colorForm">
                        <form action="" method="post">
                            <input type="text" name="colorName" /><br/>
                            <input class="red" value="0" onkeyup="createShape('newShape','createCircle',document.getElementById('redQuantity').value,document.getElementById('greenQuantity').value,document.getElementById('blueQuantity').value)" type="text" name="redQuantity" id="redQuantity"/><br/>
                            <input class="green" value="0" onkeyup="createShape('newShape','createCircle',document.getElementById('redQuantity').value,document.getElementById('greenQuantity').value,document.getElementById('blueQuantity').value)" type="text" name="greenQuantity" id="greenQuantity"/><br/>
                            <input class="blue" value="0" onkeyup="createShape('newShape','createCircle',document.getElementById('redQuantity').value,document.getElementById('greenQuantity').value,document.getElementById('blueQuantity').value)" type="text" name="blueQuantity" id="blueQuantity"/><br/>
                            <input type="submit" name="submit">
                        </form>
                    </div>
				</div>
			</div>
            <div id="elementList">
            	<?php
					require_once("classes/database.class.php");
					require_once("includes/define.php");
					$bd = new Database(MYSQL_DB_HOST,MYSQL_DB_LOGIN,MYSQL_DB_PASSWORD,MYSQL_DB_NAME);
					$bd->connect();
					$allColors = $bd->selectAll("colors");
					while($color = mysql_fetch_assoc($allColors)){
						?>
                        <div class="existingColorBloc">
                        	<h4><?php echo $color['colorName']; ?></h4>
                        	<div id="<?php echo $color['colorName']; ?>"></div>
                            <div>
                            	<span class="red"><?php echo $color['redQuantity']; ?></span>
                                <span class="green"><?php echo $color['greenQuantity']; ?></span>
                                <span class="blue"><?php echo $color['blueQuantity']; ?></span>
                            </div>
                            <script>createShape('<?php echo $color['colorName']; ?>','createCircle',<?php echo $color['redQuantity']; ?>,<?php echo $color['greenQuantity']; ?>,<?php echo $color['blueQuantity']; ?>)</script>
                        </div>
                        <?php
					}
				?>
            </div>
        </div>
    </body>
</html>
<script>createShape('newShape','createCircle',document.getElementById('redQuantity').value,document.getElementById('greenQuantity').value,document.getElementById('blueQuantity').value)</script>